import {Stack} from "expo-router/stack";
import React, {useEffect} from "react";
import {TouchableOpacity} from "react-native";
import Ionicons from "@expo/vector-icons/Ionicons";
import ChatDetailHeaderLeft from "@/components/Chat/ChatDetailLayout/HeaderLeft";
import ChatDetailHeaderTitle from "@/components/Chat/ChatDetailLayout/HeaderTitle";
import {router} from "expo-router";
import {useTheme} from "@/theme";
import {getHeaderStyle} from "@/styles/header.style";
import {useChatDetailPageState} from "@/hooks/chat/chat-detail-page";

export default function ChatDetailLayout() {
    // 获取当前主题模式
    const {themeMode} = useTheme();
    // 获取基于当前主题的header样式
    const headerStyles = getHeaderStyle(themeMode);
    //获取聊天详细页状态
    const {enableMultipleSelect} = useChatDetailPageState();
    return (
        <Stack>
            <Stack.Screen
                name="chat-detail"
                options={{
                    headerBackVisible: !enableMultipleSelect,
                    headerStyle: headerStyles.headerStyle,
                    headerTintColor: headerStyles.headerTintColor,
                    headerTitleStyle: headerStyles.headerTitleStyle,
                    headerLeft: () => <ChatDetailHeaderLeft/>,
                    headerTitle: () => <ChatDetailHeaderTitle/>,
                    headerTitleAlign: "center",
                    headerRight: () => (
                        <TouchableOpacity
                            hitSlop={20}
                            onPressIn={() => router.navigate("chat/chat-session-info")}
                        >
                            <Ionicons name="ellipsis-vertical" size={24} color="black"/>
                        </TouchableOpacity>
                    ),
                }}
            />
            <Stack.Screen
                name="chat-session-info"
                options={{
                    headerTitle: "聊天信息",
                    headerTitleAlign: "center",
                }}
            />
        </Stack>
    );
}
